<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>3333</li>
        <li>44444</li>
        <li>5555</li>
        <li>66666</li>
        <li>77777</li>
    </ul>
    一.事件委托:
    就是把我要做的事情委托给别人来做
    因为我们的冒泡机制,点击子元素的时候也会同步触发父元素的相同事件
    所以我们就把子元素的事件委托给父元素来做
    <script>
        // var list=document.querySelectorAll('li');//假设1000个
        // list.forEach(function(ele){
        //     ele.onclick=function(){//绑定1000个
        //         alert(ele.innerText);//输出li输出里面的内容
        //     }
        // })
    </script>

    二.target
    获取当前操作的目标元素(event.target标准浏览器的,非标准浏览器可以使用srcElement);
    <script>
        var ul=document.querySelector('ul');
        ul.onclick=function(e){//只绑定一次
            e=e||event;
            console.log(e.target.nodeName);//获取当前点击的元素对象√
            if(e.target.nodeName=="LI"){
                alert(e.target.innerText)
            }
        }
    </script>

    总结:点击子元素,不管子元素有没有点击事件,只要父元素有点击事件,就可以触发父元素的点击事件

</body>
</html>